<!DOCTYPE html>
<html lang="en">
{% from "util.html" import render_message %}
<head>
    <meta charset="UTF-8">
    <title>Slack Export - #{{ name }}</title>
    {% if not no_external_references %}
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='viewer.css') }}">
    {% else %}
    <style>
        {{ viewer_css_contents|safe }}
    </style>
    {% endif %}
</head>
<body>
<div id="slack-archive-viewer">
    {% if not no_sidebar %}
    <div id="sidebar">
        <h3 id="channel-title">Public Channels</h3>
        <ul class="list" id="channel-list">
            {% for channel in channels %}
                <li class="channel{% if channel == name %} active{% endif %}">
                    <a href="{{ url_for('channel_name', name=channel) }}">
                        # {{ channel }}
                    </a>
                </li>
            {% endfor %}
        </ul>
        {% if groups %}
        <h3 id="group-title">Private Channels</h3>
        <ul class="list" id="group-list">
            {% for group in groups %}
                <li class="group{% if group == name %} active{% endif %}">
                    <a href="{{ url_for('group_name', name=group) }}">
                        &#128274; {{ group }}
                    </a>
                </li>
            {% endfor %}
        </ul>
        {% endif %}
        {% if dm_users %}
        <h3 id="dm-title">Direct Messages</h3>
        <ul class="list" id="dms-list">
            {% for dm in dm_users %}
                <li class="dm{% if dm['id'] == id %} active{% endif %}">
                    <a href="{{ url_for('dm_id', id=dm['id']) }}">
                        &#128100; {{ dm["users"][0].real_name if dm["users"][0].real_name else dm["users"][0].name }}
                        {% if dm["users"][1] %}, {{ dm["users"][1].real_name if dm["users"][1].real_name else dm["users"][1].name }}{% endif %}
                    </a>
                </li>
            {% endfor %}
        </ul>
        {% endif %}
        {% if mpim_users %}
        <h3 id="mpim-title">Group Direct Messages</h3>
        <ul class="list" id="mpims-list">
            {% for mpim in mpim_users %}
                <li class="mpim{% if mpim['name'] == name %} active{% endif %}">
                    <a href="{{ url_for('mpim_name', name=mpim['name']) }}">
                        &#128101;
                        {% for user in mpim["users"] %}
                        {{ user.real_name if user.real_name else user.name }},
                        {% endfor %}
                    </a>
                </li>
            {% endfor %}
        </ul>
        {% endif %}
    </div>
    {%- endif -%}
    <div class="messages">
        {% for message in messages %}
            {% if message.msg or message.files %}
                {{render_message(message, None, no_external_references)}}
            {% endif %}
        {% endfor %}
    </div>
</div>

<script>
(function() {
  var sidebar = document.querySelector('#sidebar');
  var selected = document.querySelector('.active');
  sidebar.scrollTop = selected.offsetTop - 200;

  // make dropdown from channel title
  var channel_title = document.querySelector("#channel-title");
  var channel_dropdown = document.querySelector("#channel-list");
  channel_title.addEventListener('click', function() {
    channel_title.classList.toggle('arrow');
    channel_dropdown.classList.toggle('close');
  });

  // make dropdown from group title
  var group_title = document.querySelector("#group-title");
  var group_dropdown = document.querySelector("#group-list");
  group_title.addEventListener('click', function() {
    group_title.classList.toggle('arrow');
    group_dropdown.classList.toggle('close');
  });

  // make dropdown from dm title
  var dm_title = document.querySelector("#dm-title");
  var dm_dropdown = document.querySelector("#dms-list");
  dm_title.addEventListener('click', function() {
    dm_title.classList.toggle('arrow');
    dm_dropdown.classList.toggle('close');
  });

  // make dromdown from group dm title
  var mpim_title = document.querySelector("#mpim-title");
  var mpim_dropdown = document.querySelector("#mpims-list");
  mpim_title.addEventListener('click', function() {
    mpim_title.classList.toggle('arrow');
    mpim_dropdown.classList.toggle('close');
  });
})()
</script>
</body>
</html>
